// 月度设施投入走势图 折线图
import type { MatrixChartDataListType, DatasetMatrixChartDataListType } from './typings'
import { defineComponent, onMounted, reactive, watch, markRaw } from 'vue'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import useVuexGetters from '~/hooks/useVuexGetters'
import styles from '~/pages/assetOverview/index.module.scss'

export default defineComponent({
  name: 'AssetOverViewLineChart',
  props: ['dataList'],
  setup(props: { dataList: MatrixChartDataListType['source'] } = { dataList: [] }) {
    echarts.use([
      TitleComponent,
      ToolboxComponent,
      TooltipComponent,
      GridComponent,
      LegendComponent,
      DataZoomComponent,
      LineChart,
      CanvasRenderer,
      UniversalTransition
    ])

    const state = reactive<DatasetMatrixChartDataListType>({
      // 图表数据
      dataset: {
        source: []
      },
      lineSeries: []
    })
    const assetOverviewVuexState = useVuexGetters('assetOverview', ['customColorList'])

    watch(
      () => props.dataList,
      () => {
        barInit()
      }
    )

    onMounted(() => {
      createLineInit()
    })

    // 初始化echarts实例
    const createLineInit = () => {
      const dom = document.getElementById('assetOverViewLineChart')
      state.myChart = markRaw(echarts.init(dom!))
      barInit()
    }

    // 绘制图表
    const barInit = () => {
      state.dataset.source = []
      props.dataList.forEach((item) => {
        state.dataset.source.push(item)
      })

      state.lineSeries = []
      if (props.dataList[0] && props.dataList[0].length > 0) {
        for (let i = 0; i < props.dataList[0].length - 1; i++) {
          state.lineSeries.push({
            type: 'line',
            smooth: true,
            showSymbol: false,
            color: assetOverviewVuexState.customColorList.value[i % 8]
          })
        }
      }

      // 绘制图表
      state.myChart.clear()
      state.myChart.setOption({
        legend: {
          x: 'right', // 小注释
          y: 'top',
          top: 26
        },
        grid: {
          width: '88%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: function (param: any) {
            let barFormatter = `<div style='color: #333;'>${param[0].name}</div>`
            for (let i = 0; i < param.length; i++) {
              barFormatter += `<div style='color: #666;'>${param[i].marker} ${
                param[i].seriesName
              }：${param[i].value[i + 1]}</div>`
            }
            return barFormatter
          },
          confine: true // 提示框 不限制必须在框内
        },
        dataset: state.dataset, // 数据源
        dataZoom: [
          {
            show: true,
            realtime: true,
            // start: 30,
            // end: 70,
            xAxisIndex: [0, 1]
          },
          {
            type: 'inside',
            realtime: true,
            // start: 30,
            // end: 70,
            xAxisIndex: [0, 1]
          }
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            // 轴字
            textStyle: {
              color: 'gray'
            }
          },
          axisLine: {
            // 轴线
            show: true,
            lineStyle: {
              color: 'lightGray'
            }
          },
          axisTick: {
            // 刻度
            show: false
          }
        },
        yAxis: {
          gridIndex: 0,
          minInterval: 1,
          name: '数量',
          nameTextStyle: {
            color: 'gray'
          },
          axisLabel: {
            textStyle: {
              color: 'gray'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'lightGray'
            }
          }
        },
        series: state.lineSeries
      })

      // 建议加上以下这一行代码，不加的话，当浏览器窗口缩小时，超过div界限
      window.addEventListener('resize', function () {
        state.myChart.resize()
      })
    }

    return () => (
      <div class={styles['line-chart']}>
        <div id="assetOverViewLineChart" class={styles['statistics-map']}></div>
      </div>
    )
  }
})
